<template>
    <div>
        <!-- Header Start -->
        <el-card shadow="never" class="!border-none">
            <el-page-header content="管理课程" @back="$router.back()" />
        </el-card>
        <!-- Header End -->

        <!-- Main Start -->
        <el-card shadow="never" class="!border-none" style="margin-top: 15px">
            <el-form ref="formRef" label-width="90px" class="formData">
                <el-form-item label="专区课程:">
                    <div>
                        <course-select @confirm="handleConfirm" :courseData="courseData">
                            <el-button type="primary">选择课程</el-button>
                        </course-select>
                        <el-table class="mt-4" height="450" :data="courseData">
                            <el-table-column prop="date" label="课程信息" min-width="330">
                                <template #default="{ row }">
                                    <div class="flex items-center">
                                        <el-image
                                            style="width: 80px; height: 60px"
                                            :src="row.cover"
                                        ></el-image>
                                        <span class="ml-2 flex-1">{{ row.name }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="type_desc" label="课程类型" min-width="100">
                                <template #default="{ row }">
                                    <div v-if="row.type == 1">图文</div>
                                    <div v-if="row.type == 2">音频</div>
                                    <div v-if="row.type == 3">视频</div>
                                    <div v-if="row.type == 4">专栏</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="teacherName" label="讲师" min-width="150" />
                            <el-table-column prop="sellPrice" label="销售价格" min-width="100">
                            </el-table-column>
                            <el-table-column prop="name" label="课程状态" min-width="100">
                                <template #default="{ row }">
                                    <el-tag class="ml-2" v-if="row.status == 1" type="success"
                                        >上架中</el-tag
                                    >
                                    <el-tag class="ml-2" v-if="row.status == 2" type="info"
                                        >已下架</el-tag
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="操作" min-width="180" fixed="right">
                                <template #default="scope">
                                    <el-button
                                        link
                                        type="primary"
                                        @click="handleDelete(scope.$index)"
                                        >移除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- Main End -->

        <!-- Footer Start -->
        <footer-btns>
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </footer-btns>
        <!-- Footer End -->
    </div>
</template>

<script lang="ts" setup>
import {
    apiSubjectCourseDetail, // 专区课程详情
    apiSubjectDecorateSave // 保存专区课程
} from '@/api/application/application'
import CourseSelect from '@/components/course-select/course-root.vue'
import FooterBtns from '@/components/footer-btns/index.vue'
import feedback from '@/utils/feedback'

/** Data Start **/
const route = useRoute()
const router = useRouter()
// 专区ID
const id = String(route.query.id)
// 课程数据
const courseData = ref<any>([])
/** Data End **/

/** Methods Start **/
/**
 * @description 获取专区课程详情
 */
const initSubjectCourseDetail = async (): Promise<void> => {
    try {
        const res = await apiSubjectCourseDetail({ subjectId: id })
        courseData.value = res
    } catch (err) {
        console.log('获取专区课程详情err=>', err)
    }
}

/**
 * @description 添加专栏目录课程
 */
const handleConfirm = (isSelect: number[]) => {
    courseData.value = isSelect
}

/**
 * @description 保存
 */
const onSubmit = async (): Promise<void> => {
    try {
        await apiSubjectDecorateSave({
            courseIds: courseData.value.map((item: any) => item.id),
            subjectId: id
        })
        await feedback.msgSuccess('保存成功')
        router.back()
    } catch (err) {
        console.log('添加栏目组件报错err=>', err)
    }
}

/**
 * @description 移除目录
 */
const handleDelete = async (index: any) => {
    courseData.value.splice(index, 1)
}
/** Methods End **/

/** LifeCycle Start **/
if (id) initSubjectCourseDetail()
/** LifeCycle End **/
</script>

<style lang="scss" scoped>
:deep() .el-form-item__content {
    display: block;
}
</style>
